<template>
    <div class="app-container">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="申请时间">
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" 
                />
            </el-form-item>
            <el-form-item label="所属战队" prop="roleName">
                <el-input
                    v-model="queryParams.roleName"
                    placeholder="请输入"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="申请人" prop="roleName">
                <el-input
                    v-model="queryParams.roleName"
                    placeholder="请输入"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="类型" prop="status">
                <el-select
                    v-model="queryParams.status"
                    placeholder="请选择"
                    clearable
                >
                <el-option
                    v-for="dict in dict.type.line_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
                </el-select>
            </el-form-item>
            
            <el-form-item label="移交接收人" prop="roleKey">
                <el-input
                    v-model="queryParams.roleKey"
                    placeholder="请输入"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="审核状态" prop="status">
                <el-select
                v-model="queryParams.status"
                placeholder="请选择"
                clearable
                >
                <el-option
                    v-for="dict in dict.type.audit_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row>
            <el-col>
                <el-button type="primary" plain size="mini" @click="goDetail(1)">审批详情</el-button>
                <!-- <el-button type="primary" plain size="mini" @click="handleEdit">编辑项目</el-button> -->
            </el-col>
        </el-row>

        <el-table :data="tableData" v-loading="loading">
            <el-table-column prop="date" label="申请时间" />
            <el-table-column prop="name" label="申请人所属战队"  :show-overflow-tooltip="true" />
            <el-table-column prop="name" label="申请人"  />
            <el-table-column prop="name" label="类型" />
            <el-table-column prop="name" label="移交接收人" />
            <el-table-column prop="name" label="接收人所属战队" :show-overflow-tooltip="true"  />
            <el-table-column prop="name" label="审核状态" />
            <el-table-column prop="name" label="操作" fixed="right" width="180" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="goDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>


export default {
    dicts: ['line_type','audit_status'],
    data() {
        return {
            loading:false,
            dateRange: '',
            queryParams: {      // 查询参数
                pageNum: 1,
                pageSize: 10,
                roleName: undefined,
                roleKey: undefined,
                status: undefined
            },
            tableData:[],
        }
    },
    methods: {
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            // this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            // this.dateRange = []
            // this.resetForm("queryForm")
            // this.handleQuery()
        },
        goDetail(item){
            console.log(item)
            this.$router.push(
                { path: '/approve/detail' }
            )
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
